<template>
  <div id="home-app">
    <dv-full-screen-container class="content">
      <div @click="toManage()"
        style="position: fixed; top:10px;left: 750px; width: 210px; height: 40px; background-color: #fff; z-index: 100;opacity: 0">
        <!-- <img style="width: 30px; height: 30px;" src="@/assets/jwd-icon-home.png" alt=""> -->
      </div>
      <dv-border-box-11 title="智游景区">
        <div style="display: flex;  justify-content: space-between; width: 100%;">
          <div class="item" style="margin-left: 20px;">
            <dv-border-box-8 style="width: 100%; height: 250px;">
              <counter :total=total :cur=cur></counter>
            </dv-border-box-8>
            <dv-border-box-13 style="width: 100%; height: 250px;">
              <R7DayNum :dataList="R7dayData"></R7DayNum>
            </dv-border-box-13>
          </div>
          <div class="big-mid">
            <dv-border-box-1 style="width: 100%; height: 500px;">
              <div style="height: 20px;">

              </div>
              <div id="container">

              </div>
            </dv-border-box-1>
          </div>
          <div class="item" style="margin-right: 20px;">
            <dv-border-box-12 style="width: 100%; height: 250px;">
              <agePieVue :dataList="AgeData"></agePieVue>
            </dv-border-box-12>
            <dv-border-box-8 :reverse="true" style="width: 100%; height: 250px;">
              <nowPlayerNumVue :dataList="NowUserData" :axData="NowUserAxisdata"></nowPlayerNumVue>

            </dv-border-box-8>
          </div>
        </div>

        <div style="display: flex;  justify-content: space-between; width: 100%;">
          <div class="footer-item" style="flex: 0 1 30%;">
            <dv-border-box-1 style="width: 100%; height: 300px; margin-left: 13px;">
              <chinaMap :DataList="PlayerFromDataList"></chinaMap>
            </dv-border-box-1>
          </div>
          <div class="footer-item" style="flex: 0 1 40%;">
            <dv-border-box-9 style="width: 100%; height: 300px;">
              <spotNumVue></spotNumVue>
            </dv-border-box-9>
          </div>
          <div class="footer-item" style="flex: 0 1 30%;">
            <dv-border-box-1 style="width: 100%; height: 300px; margin-right: 20px;">
              <userFeedBackVue :dataList="useFeedData"></userFeedBackVue>
            </dv-border-box-1>
          </div>
        </div>


      </dv-border-box-11>

    </dv-full-screen-container>

  </div>
</template>
  
<script>
import chinaMap from '@/components/chinaMap.vue';
import counter from '@/components/counter/counter.vue'
import R7DayNum from '@/components/R7DayNum.vue';
import spotNumVue from '@/components/spotNum.vue';
import agePieVue from '@/components/agePie.vue';
import userFeedBackVue from '@/components/userFeedBack.vue';
import nowPlayerNumVue from '@/components/nowPlayerNum.vue';
import TMap from '@/utils/initmap'

export default {
  components: {
    chinaMap,
    counter,
    R7DayNum,
    spotNumVue,
    agePieVue,
    userFeedBackVue,
    nowPlayerNumVue
  },

  data() {
    return {
      tMap: null,
      total: 123456,
      cur: 1234,
      NowUserAxisdata: ["13:00", "13:03", "13:06", "13:09", "13:12", "13:15","13:18", "13:21", "13:24"],
      NowUserData: [100, 123, 145, 167, 145, 156,185,189,195],
      useFeedData: [
        { value: 148, name: '不满意' },
        { value: 735, name: '一般' },
        { value: 580, name: '满意' },
      ],
      R7dayData: [121, 222, 433, 344, 565, 466, 577],
      AgeData: [
        { value: 448, name: '5-17' },
        { value: 735, name: '18-30' },
        { value: 580, name: '31-44' },
        { value: 284, name: '45-60' },
        { value: 120, name: '60以上' }
      ],
      PlayerFromDataList: [
        {
          name: "黑龙江",
          value: 44,

        },
        {
          name: "湖南",
          value: 23,

        },
        {
          name: "云南",
          value: 68,

        },
        {
          name: "安徽",
          value: 66,

        },
        {
          name: "江西",
          value: 33,

        },
        {
          name: "吉林",
          value: 43,

        },
        {
          name: "湖北",
          value: 143,

        },

      ]
    }
  },
  mounted() {
    this.initAMap()
  },
  unmounted() {
    this.tMap?.destroy();
  },
  methods: {
    initAMap() {
      TMap.init().then((TMap) => {
        this.TXMap = TMap;
        this.tMap = new TMap.Map("container", {
          center: new TMap.LatLng(29.045664, 110.483699), //设置地图中心点坐标
          zoom: 16, //设置地图缩放级别
          viewMode: "3D",
          baseMap: {  // 设置卫星地图
            type: 'satellite'
          }
        });
        //移除控件缩放

        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

        // 移除比例尺控件

        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);

        // 移除旋转控件

        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);

      });
    },
    toManage() {
      console.log(1111)
      this.$router.push({ name: 'layout' })
    }
  },
  created: {

  }
}

</script>
  
<style lang="less">
#container {
  width: 95%;
  height: 92%;
  margin: 0 auto;
}

body {
  margin: 0 0;
}

#home-app {
  margin: 0 0;
  width: 100%;
  height: 100vh;
}

.content {
  background: url('@/assets/a15.png') no-repeat center center;
  padding: 0;
  background-size: cover;
  //   .border-box-content{
  //   display: flex;
  //   justify-content: space-between;
  // }
}

.item {
  flex: 0 1 24%;
  margin-left: 5px;
  margin-top: 60px;
}

.big-mid {
  flex: 0 1 48%;
  width: 100%;
  margin-left: 5px;
  margin-top: 60px;
}

.footer-item {
  margin-left: 10px;
  margin-top: 15px;
  margin-right: 20px;
}</style>
  